<template>
    <div class="action-from action-group" :class="{['action-hide']:this.model.locate==='inline'}">
        <slot name="button">
            <template  v-show="buttonShow"  v-if="actionModel.param && actionModel.param.select_rangeset">
                <Selector class="select-box" :path="fetchPath" @selectChange="selectChange" :placeholder="selectPlaceholder"></Selector>
                <Button type="info" :icon="actionModel.icon || 'share'" :loading="loading" @click="actionTriggerCheck">{{actionModel.name}}</Button>
            </template>
            <Button  v-show="buttonShow"  class="action-button" :disabled="!actionEnable" :icon="model.icon" @click="actionTrigger" :type="buttonType">
                {{model.name}}
            </Button>
        </slot>
        <div class="action-modal-box" v-if="isLoad">
            <ActionModal ref="modal" :action-model="actionModel" :action-data="actionData" :modalShow="modalShow" :open.sync="modalShow" :isLoad="isLoad"></ActionModal>
        </div>
    </div>
</template>
<script>
import modalActionBase from "../modalActionBase";
import actionModal from "./modal";
import Selector from "@/components/selector";

export default {
  name: "actionImport",
  extends: modalActionBase,
  data() {
    return {
      isLoad: false,
      selectValue: null,
      selectData: null
    };
  },
  computed: {
    rangeset() {
      var rangeset =
        (this.actionModel.param && this.actionModel.param.select_rangeset) ||
        {};
      if (rangeset && typeof rangeset === "string") {
        try {
          rangeset = JSON.parse(rangeset);
        } catch (ex) {
          rangeset = {
            code: rangeset
          };
        }
      }
      return rangeset;
    },
    fetchPath() {
      if (this.rangeset) {
        if (this.rangeset.path) {
          return this.rangeset.path;
        } else if (this.rangeset.dataset || this.rangeset.code) {
          return `/service/{app}/dataset/data/${this.rangeset.dataset ||
            this.rangeset.code}`;
        }
      }
    },
    selectPlaceholder() {
      return (
        (this.actionModel.param && this.actionModel.param.select_tip) || "请选择"
      );
    }
  },
  methods: {
    actionSubmit() {
      this.actionCancel();
    },
    modelParse(m) {
      if (this.$owner.model && this.$owner.model.slaves) {
        m.param.size = m.param.size || "l";
        m.param.col = m.param.col || 2;
      }
      return m;
    },
    updateData() {
      this.$refs.modal.updateData();
    },
    selectChange(v) {
      this.selectData = v;
    },
    actionTriggerCheck(e) {
      if (!this.selectData) {
        this.$Message.warning(`请先选择下拉框内容,在进行${this.actionModel.name}操作`);
      } else {
        this.actionTrigger(e);
      }
    }
  },
  created() {},
  components: {
    actionModal,
    Selector
  }
};
</script>
